<template>
  <!-- 主页背景 -->
  <index />
  <div class="pop">
    <div style="margin: 4rem"></div>
    <span class="title">注册</span>
    <div class="input">
      <img src="../assets/输入头像.png" style="margin: 0px 30px 0px 30px" />
      <input type="text" placeholder="输入邮箱号" v-model="userEmail" />
    </div>
    <div class="input">
      <img src="../assets/输入验证码.png" style="margin: 0px 30px 0px 30px" />
      <input type="text" placeholder="输入验证码" v-model="checkCode" />
      <el-popover
        placement="bottom"
        :width="100"
        trigger="click"
        content="发送成功，注意查收"
      >
        <template #reference>
          <div class="test">
            <el-button type="info" plain @click="sendCheckNumber()"
              >发送验证码</el-button
            >
          </div>
        </template>
      </el-popover>
    </div>
    <div class="input">
      <img
        src="../assets/输入头像.png"
        style="margin: 0px 30px 0px 30px; visibility: hidden"
      />
      <input type="text" placeholder="输入用户名" v-model="username" />
    </div>
    <div class="input">
      <img
        src="../assets/输入头像.png"
        style="margin: 0px 30px 0px 30px; visibility: hidden"
      />
      <input type="password" placeholder="输入密码" v-model="password" />
    </div>
    <div class="navTo">
      <p @click="navToLogin()">已有账号 <u>返回登录</u></p>
    </div>
    <el-button type="info" plain size="large" @click="register()"
      >注册</el-button
    >
    <img src="../assets/返回.png" class="back" @click="$router.go(-1)" />
  </div>
</template>

<script setup>
import router from "@/router";
import axios from "axios";
import { inject, ref } from "vue";

const address = inject("address");
const userEmail = ref(); //邮箱号
const checkCode = ref(); //验证码
const username = ref(); //账号
const password = ref(); //密码

async function sendCheckNumber() {
  //验证邮箱正确性
  if (!validateEmail(userEmail.value)) {
    alert("请输入正确的邮箱号");
    return;
  }
  await axios({
    url: address + "admin/email/sendExchangeDutyEmail",
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: {
      content: "你的验证码是：",
      title: "欢迎你使用智能黑板系统",
      toUser: userEmail.value,
    },
  })
    .then((res) => {
      console.log("获取验证码成功！", res.data);
    })
    .catch((err) => {
      console.error("获取失败！", err);
    });
}

//注册
async function register() {
  //验证四个框是否填满
  if (
    !username.value &&
    !userEmail.value &&
    !password.value &&
    validateEmail(userEmail.value)
  ) {
    alert("请把信息填写完整");
    return;
  }
  //验证验证码是否正确
  var isCheckCode = true;
  await axios({
    url: address + "admin/user/checkCode",
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: {
      email: userEmail.value,
      verCode: checkCode.value,
    },
  })
    .then((res) => {
      console.log("检验成功！", res.data);
      if (res.data.code != "403") {
        isCheckCode = true;
      } else {
        alert("验证码输入错误！");
      }
    })
    .catch((err) => {
      console.error("获取失败！", err);
      alert("验证码输入错误！");
    });
  //如果正确，开始注册
  if (!isCheckCode) {
    alert("验证码输入错误！");
    return;
  }
  //接口输入内容
  console.log({
    password: password.value,
    username: username.value,
  });
  alert("注册成功！");
  router.push("/login");
  await axios({
    url: address + "admin/user/register",
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: {
      password: password.value,
      username: username.value,
    },
  })
    .then((res) => {
      console.log("注册成功！", res.data);
      if (res.data.code == "500") {
        alert("用户名重复！");
      } else if (res.data.code == "403") {
        alert("注册失败！");
      } else if (res.data.code == "200") {
        alert("注册成功！");
        router.push("/login");
      }
    })
    .catch((err) => {
      console.error("注册失败！", err);
      alert("注册失败！");
    });
}

//验证邮箱正确性
function validateEmail(email) {
  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailPattern.test(email);
}

function navToLogin() {
  router.push("/Login");
}
</script>

<style scoped>
.pop {
  width: 50rem;
  height: 37.5rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  background-color: rgb(245, 245, 245);
  border: 5px solid rgb(224, 224, 224);
  box-shadow: 0px 4px 10px gray;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
  top: 10%;
}

.input {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 3rem;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(18, 135, 222);
  box-shadow: 0px 4px 10px gray;
  margin: 15px;
}
.tip {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.back {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.send {
  position: absolute;
  left: 40rem;
}

.login {
  height: 3.75rem;
  width: 12.5rem;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  border: 1px rgb(224, 224, 224) solid;
  text-align: center;
  font-size: 1.5rem;
}
.test {
  position: absolute;
  left: 72%;
}
.input input {
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 1rem;
}

.input img {
  width: 25px;
  height: auto;
}

.el-button--large {
  width: 12.5rem;
}
.navTo {
  text-align: center;
  cursor: pointer;
}
</style>